<template>
  <div>
    <van-nav-bar
      title="找到"
      right-text="🔍"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="total">
      <div class="video" v-for="(v, index) in arr" :key="index">
        <div class="imgs">
          <img :src="v" alt="" />
          <div>{{ text[index] }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { NavBar } from "vant";
Vue.use(NavBar);
export default {
  data() {
    return {
      arr: [],
      text: [],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({ path: "/total" }).catch((err) => {});
    },
  },
  mounted() {
    this.$http({
      url: "http://localhost:3000/find",
      method: "get",
    }).then((res) => {
      res.data.forEach((element) => {
        element.data.data1.forEach((item) => {
          this.arr.push(item.img1);
          this.text.push(item.imgp);
        });
      });
    });
  },
};
</script>

<style scoped>
.total {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.total .video {
  width: 48%;
  height: 250px;
}
.video .imgs {
  height: 200px;
  width: 100%;
}
.video .imgs img {
  height: 100%;
  width: 100%;
}
</style>